<template>
	<!-- 必到-首页 -->
	<view>
		<!-- 导航 -->
		<view>
			<u-navbar
				back-text="全部评价"
				:border-bottom="false"
				:back-text-style="textStyle"
				back-icon-color="#000000"
				style="font-weight: bold;font-family: PingFang SC;"
			></u-navbar>
		</view>
		<mescroll-body
			top="0"
			:down="downOption"
			:up="upOption"
			ref="mescrollRef"
			:fixed="true"
			:height="comHeight"
			:topbar="false"
			bottom="0"
			:bottombar="true"
			:safearea="false"
			@init="mescrollInit"
			@down="downCallback"
		>
			<view class="wrap">
				<view class="introduce" style="border-bottom: 1px solid #DEDEDE;padding-top: 0;">
					<view class="pjList">
						<view class="curser" style="width: 100%;">
							<image :src="xinxi.portrait" mode=""></image>
							<view class="yonghu" style="width: 82%;">
								<view class="yonghu_nam">
									<view class="yonghu_mcs">{{ xinxi.nickName }}</view>
									<view class="yonghu_data">{{ xinxi.fmtCommentDatetime }}</view>
								</view>
								<u-rate :count="count" v-bind:value.sync="xinxi.formatScore" :disabled="true" active-color="#F29423"></u-rate>
								<text>{{ xinxi.formatScore }}</text>
							</view>
						</view>
					</view>
					<view class="pingyu">{{ xinxi.comments }}</view>
					<view v-if="xinxi.images" class="pircture">
						<view v-for="(ite, uin) in xinxi.images.split(',')" style="width: 148rpx;height: 154rpx;margin-right: 22rpx;" :key="uin"><image :src="ite" style="width: 148rpx;height: 154rpx;" mode="aspectFill"></image></view>
					</view>
					<view class="neirong">{{ xinxi.name||'' }}</view>
				</view>
				<view style="width: 100%;margin: auto;">
					<view v-if="xinxi.portraits!=''||xinxi.portraits!=null" style="width: 92%;margin: auto;">
						<view style="color:#272755 ;font-size: 30rpx;line-height: 70rpx;font-weight: bold;">服务人员</view>
						<view  class="pircture">
							<view v-for="(ite, uin) in xinxi.portraits" style="width: 148rpx;height: 154rpx;margin-right: 22rpx;" :key="uin"><image :src="ite" style="width: 148rpx;height: 154rpx;" mode="aspectFill"></image></view>
							
						</view>
					</view>
					<view v-if="xinxi.portraits!=''||xinxi.portraits!=null" style="width: 100%;height: 2rpx ;background-color: #E4E4E4;"></view>
					<view v-if="xinxi.fmtReplyTime" style="width: 92%;margin: auto;">
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view style="color:#272755 ;font-size: 30rpx;line-height: 70rpx;font-weight: bold;">商家回复</view>
							<view class="yonghu_data">{{ xinxi.fmtReplyTime }}</view>
						</view>
						<view style="color: #9393AA;font-size: 26rpx;">
						{{xinxi.entReply}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="margin-top: 50rpx;" v-if="!showList || allList.length == 0">
				<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{ prompt }}</u-divider>
			</view> -->
		</mescroll-body>
	</view>
</template>

<script>
export default {
	data() {
		return {
			textStyle: {
				color: '#272755'
			},
			count: 5,
			value: 4.5,
			cateId: '',
			enterpriseId: '',
			page: 1,
			pageSize: 4,
			prompt: '加载中....',
			showList: false,
			totalPage: 1,
			// 下拉刷新配置
			downOption: {
				use: true,
				auto: false,
				offset: 40
			},
			upOption: {
				use: true,
				auto: false
			},
			mescroll: null,
			allList: [],
			comHeight: 0,
			xinxi:'',
			appraiseId:''
		};
	},
	onLoad(option) {
		var that = this;
		var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, width, height, right } = menuButtonInfo;
		uni.getSystemInfo({
			success: res => {
				const { statusBarHeight } = res;
				const margin = top - statusBarHeight;
				var navHeight = height + statusBarHeight + margin * 4;
				that.comHeight = res.windowHeight - navHeight + 'px';
				console.log(that.comHeight);
			}
		});
	this.appraiseId=option.appraiseId
		console.log(that.cateId, '套餐id');
		console.log(that.enterpriseId, '商家id');
		that.getAll(); // 获取评价列表
	},

	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		// 下拉刷新回调函数
		downCallback() {
			setTimeout(() => {
				
				this.prompt = '加载中....';
				this.getAll();
				this.mescroll.endSuccess();
			}, 2000);
		},
		// 获取评价列表
		getAll() {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'appraise/package/info'
			};
			let data = {
				appraiseId: _this.appraiseId,
				
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if ((res.code = 200)) {
					_this.xinxi = res.data;
			
				} else {
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 0 !important;
}

.introduce {
	padding: 34rpx 40rpx 0 42rpx;
}

.pjList {
	display: flex;
	margin-top: 42rpx;
}

.curser {
	display: flex;
	align-items: center;
}

.curser image {
	width: 94rpx;
	height: 94rpx;
	border-radius: 50%;
}

.yonghu {
	margin-left: 26rpx;
}

.yonghu text {
	color: #f29423;
}

.yonghu_nam {
	display: flex;
	margin-bottom: 8rpx;
}

.yonghu_mcs {
	color: #272755;
	font-size: 30rpx;
	font-weight: bold;
	width: 50%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.yonghu_data {
	font-size: 26rpx;
	color: #9393aa;
	font-weight: 500;
	width: 50%;
	text-align: right;
}

.pingyu {
	margin-top: 26rpx;
	color: #9393aa;
	font-size: 26rpx;
}

.pircture {
	display: flex;
	padding: 20rpx 0 20rpx 0;
}

.pircture view {
	padding-right: 24rpx;
}

.pircture image {
	width: 152rpx;
	height: 158rpx;
}

.neirong {
	color: #9e9eb2;
	font-size: 26rpx;
	padding: 18rpx 0 24rpx 0;
}
</style>
